<script setup lang="ts">
import { reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ElDescriptions, ElMessage } from 'element-plus'
import { getAppDetailApi } from '@/api/application'

const { t } = useI18n()

const props = defineProps<{
  id: string
}>()

const editForm = reactive({
  feilds: {
    appName: '',
    appSecret: '',
    applyWay: '',
    state: '',
    contactWay: '',
    profile: ''
  }
})

const init = async () => {
  ElMessage.success(props.id)
  const res = await getAppDetailApi(props.id)
  console.log(res)
  editForm.feilds = res.data.detail
}
init()
</script>

<template>
  <ElDescriptions :model="editForm">
    <ElDescriptionsItem :label="t('application.appName')">
      <ElInput v-model="editForm.feilds.appName" disabled />
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('application.appSecret')">
      <ElInput v-model="editForm.feilds.appSecret" />
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('application.contactWay')">
      <ElInput v-model="editForm.feilds.contactWay" />
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('application.profile')">
      <ElInput
        v-model="editForm.feilds.profile"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 5 }"
      />
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('application.applyWay')">
      <ElSelect v-model="editForm.feilds.applyWay">
        <ElOption value="free" label="无需申请" />
        <ElOption value="self" label="自助申请" />
        <ElOption value="invite" label="管理员邀请" />
      </ElSelect>
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('application.state')">
      <ElSelect v-model="editForm.feilds.state">
        <ElOption value="developing" :label="t('application.developing')" />
        <ElOption value="online" :label="t('application.online')" />
        <ElOption value="offline" :label="t('application.offline')" />
      </ElSelect>
    </ElDescriptionsItem>
  </ElDescriptions>
</template>
